<html>
<head>
   <script src="../../Grid/GridE.js"> </script>
</head>
<body class="Tutorial">
   <style>
      /* Tutorial shared styles */
      .Tutorial h1,.Tutorial h2,.Tutorial ul,.Tutorial .Desc,.Tutorial .Path,.Tutorial .Xml { max-height:999999px; }
      .Tutorial h1 { font:30px Arial; padding:5px 0px 5px 0px; margin:0px; text-align:center; }
      .Tutorial h2 { font:15px Arial; padding:0px; margin:0px 0px 10px 0px; text-align:center; color:#757575; }
      .Tutorial h3,.Tutorial h4 { display:inline-block; font:bold 15px Arial; padding:0px 5px 0px 5px; border-radius:2px; color:black; margin:2px; font-style:normal; color:#333; }
      .Tutorial h3 { background:#EE9; border:1px solid #DD8; }
      .Tutorial h4 { background:#BDE; border:1px solid #ACD; }
      .Tutorial a { text-decoration:underline; }      
      .Tutorial li { padding-bottom:8px; }
      .Tutorial ul { margin:6px 0px 0px 20px; font:13px Arial; }
      .Tutorial > ul { margin-left:0px; padding-left:15px; clear:both; }
      .Tutorial ul b { color:#0585B9; }
      .Tutorial .Path { font:normal 12px Arial; color:#0585B9; }
      .Tutorial .Path b { color:#D73938; }
      .Tutorial .Path u { text-decoration:none; color:black; font-weight:bold; padding:0px 2px 0px 2px; }
      .Tutorial .Xml { margin-bottom:6px; font-size:12px; color:#757575; }
      .Tutorial .Border { border:1px solid #dfdfdf; padding:10px 20px 10px 20px; margin:0px 8px 20px 0px; min-width:100%; box-sizing:border-box; overflow:hidden; }
      .Tutorial .Main { }
   </style>

   <center class="Path"><script>document.write(location.href.replace(/(.*)(\/Tutorials\/)([^\/]+)\/([^\/]+)$/,"$2<b>$3</b>/$4").replace(/([^<]|^)(\/|\.)/g,"$1<u>$2</u>"));</script></center>
   <h1>8. Cell format</h1>
   <h2>Dynamic cell type and format</h2>

   <center class="Border Border2" id="Center1">
      <div style="float:left; margin-right:10px; margin-bottom:20px;">
         <div class="Xml">Source: <a href='08-Cell_Type_Auto.js' target="_blank">08-Cell_Type_Auto.js</a></div>
         <div class="Main" style='width:594px; height:500px;'>
            <bdo Debug='check' Data_Url='08-Cell_Type_Auto.js'></bdo>
         </div>
      </div>
      <div style="float:left;">
         <div class="Xml">Source: <a href='08-Cell_Automatic_Type.js' target="_blank">08-Cell_Automatic_Type.js</a></div>
         <div class="Main" style='width:594px; height:500px;'>
            <bdo Debug='check' Data_Url='08-Cell_Automatic_Type.js'></bdo>
         </div>
      </div>
   </center>

   <ul>
      <li> 
         <h4>Dynamic format</h4><br />
         Dynamic format is turned on by &lt;Cfg> attribute <h3>DynamicFormat</h3> and permits changing Format, Type and similar attributes and also undo / redo these actions by users.<br />
         It shows also the format combo on default Toolbar.
      </li>
      <li>
         <h3>Type</h3>=<h4>"Auto"</h4> (the left / first sample)<br />
         Auto type is automatic type, the resulted type is chosen according to the cell value and Format.<br />
         It chooses from text (Lines), number (Float) and date (Date). <br />
         Unlike automatic type (described in next paragraph), it differs cell value only between text and number. The date is chosen from number only if set appropriate Format.<br />
         The Type "Auto" does not change any cell attribute, it controls just the cell value display and edit format and horizontal alignment.<br />
      </li>
      <li>
         <h4>Automatic type</h4> (the right / second sample)<br />
         If set <h3>DynamicFormat</h3>='<b>2</b>' it automatically changes cell Type and optionally Format and similar attributes according to cell value.<br />
         The feature is similar to cell Type "Auto" described in previous paragraph. If the cell Type is set to "Auto", the DynamicFormat="2" is ignored.<br />
         The Type is chosen: on grid load, after value is edited by a user, after value is calculated by editable formula.<br />
         If the Type is changed, it resets also other cell attributes according to <b>TextFormat</b>, <b>NumberFormat</b> or <b>DateFormat</b> that points to predefined <b>Formats</b> list.<br />
         The type can be automatically set to "<b>Text</b>", "<b>Float</b>" or "<b>Date</b>". If default cell type is "<b>Lines</b>", it is used instead of "Text".<br />
         To choose different type than these listed, use <b>OnFindType</b> API event.<br />
      </li>
      <li>
         <h4>Predefined formats</h4><br />
         All formats available to choose dynamically by a user and also to use when automatically changes Type by automatic type.<br />
         The formats list is defined by &lt;Cfg> attribute <h3>Formats</h3> and its format is like JSON menu.<br />
         The Formats is also shown as menu on click to Formats combo on default toolbar.<br />
         The Formats items define usually the cell Type, Format and EditFormat, but can define nearly all other cell attributes. For Type "Auto" the Formats item Type attribute is ignored.<br />
      </li>
   </ul>

   <!-- Google Analytics code run once for trial -->
   <script>
      var TGTrial = document.cookie.match(/TGTrialSheet\s*=\s*(\d+)/), TGIndex = 128;
      if(!TGTrial||!(TGTrial[1]&TGIndex)) setTimeout(function(){
         var n = "RunTrialSheet8", d = (new Date((new Date).getTime()+31536000000)).toUTCString(); document.cookie = "TGTrialSheet="+((TGTrial?TGTrial[1]:0)|TGIndex)+";expires="+d;
         var u = document.cookie.match(/TGTrialUsed\s*=\s*(\d+)/); u = u ? u[1]-0+1 : 1; if(u<=11) document.cookie = "TGTrialUsed="+u+";path=/;expires="+d;
         var s = "<div style='width:0px;height:0px;overflow:hidden;'><iframe src='http"+(document.location.protocol=="https"?"s":"")+"://www.treegrid.com/Stat/GA.html?productName="
               +(u==1||u==3||u==5||u==10?"UsedTrial"+u:n)+"' onload='var T=this;setTimeout(function(){document.body.removeChild(T.parentNode.parentNode);},1000);'/></div>";
         var F = document.createElement("div"); F.innerHTML = s; document.body.appendChild(F);
         },100);
   </script>
</body>
</html>